<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>state</title>
    <script type="text/javascript"
        src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
    <script type="text/javascript"
        src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script type="text/javascript"
        src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>
    <script type="text/babel">
        /**
         *  onClick={demo} 把函数赋值到onClick 
         *  使用箭头函数
         *  使用bind(this) 方法
         * 
         *  1.构造器调用1次
         *  2.render调用 1+N次
         *  3.changWeather 调用几次?  点几次调用几次
         */ 

        // 1.创建组件
        class Weather extends React.Component {

            constructor(props) {
                console.log('constructor')
                super(props)
                this.state = {isHot: false , wind: '大风'}
                this.changeWeather = this.changeWeather.bind(this)
            }

            changeWeather(){
                console.log(this);
                const isHot = this.state.isHot
                // 状态需要通过setState进行更新
                this.setState({isHot: !isHot})
            }

            render(){
                console.log('render this->')
                const {isHot, wind} = this.state
                return (
                    <div>
                        {/*<h1 id="title" onClick={this.changeWeather}>今天天气很{isHot ? '炎热': '凉爽'}</h1>    */}
                        <h1 id="title" onClick={()=>{this.setState({isHot: !isHot})}}>今天天气很{isHot ? '炎热': '凉爽'}, {wind}</h1>    
                    </div>
                )
            }

        }
        //2.渲染
        ReactDOM.render(<Weather/>, document.getElementById("test"))

    
        // const title = document.getElementById('title')
        // title.addEventListener('click', ()=>{
        //     console.log('标题被点击了')
        // })

        // title.onclick = () => {
        //     console.log("标题被点击了!")
        // }   
        
       
    </script>
</body>
</html>